import './ChartTemplate.scss'
import { useRequest } from 'alova'
import * as echarts from 'echarts'
import { useMount, useSize } from 'ahooks'
import { useEffect, useState, useRef } from 'react'
import { Http } from '../../Api'
import { stringToObject } from '../configFun'
import {
    ParamsMapping,
} from './BefaultParams'
import {
    ColumnTemplate,
    BarTemplate,
    LineTemplate,
    AreaTemplate,
    PieTemplate,
    GaugeTemplate,
    RadarTemplate,
    HeatmapTemplate,
    Bar3DTemplate
} from '../AntVCharts'

import { VChartA01, VChartA02, VChartA03, VChartA04, VChartA05, VChartA06, VChartA07 } from '../VisCharts'

// 获取随机日历图数据
const getVirtualData = (year) => {
    const date = +echarts.time.parse(year + '-01-01');
    const end = +echarts.time.parse(+year + 1 + '-01-01');
    const dayTime = 3600 * 24 * 1000;
    const data = [];
    for (let time = date; time < end; time += dayTime) {
        data.push([
            echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
            Math.floor(Math.random() * 1000)
        ]);
    }
    return data;
}
// 获取随机3D柱图数据
const get3DBarData = (max) => {
    let data = []
    {
        [...Array(24)].forEach((_, key) => {
            [...Array(7)].forEach((_, index) => {
                data.push([key, index, Math.floor(Math.random() * (max - 1 + 1)) + 1])
            })
        })
    }
    return data
}

export const ChartTemplateA01 = ({ preview, HomeEvent, render, config }) => {
    const ChartBox = useRef()
    const size = useSize(ChartBox)
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const list = data.map(item => mapping.map(({ nameField, typeField, valueField }) =>
            ({ name: nameField, type: item[typeField], value: item[valueField], ...item })
        )).flat(Infinity)
        setData(list)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA01
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA01))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA01', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' ref={ChartBox} draggable={render ? false : true} onDragStart={onDragStart}>
                {size && Style && <ColumnTemplate size={preview ? { ...size, height: size.width } : size} data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA02 = ({ preview, HomeEvent, render, config }) => {
    const ChartBox = useRef()
    const size = useSize(ChartBox)
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const list = data.map(item => mapping.map(({ nameField, typeField, valueField }) =>
            ({ name: nameField, type: item[typeField], value: item[valueField], ...item })
        )).flat(Infinity)
        setData(list)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA02
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA02))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA02', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' ref={ChartBox} draggable={render ? false : true} onDragStart={onDragStart}>
                {size && Style && <BarTemplate size={preview ? { ...size, height: size.width } : size} data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA03 = ({ preview, HomeEvent, render, config }) => {
    const ChartBox = useRef()
    const size = useSize(ChartBox)
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const list = data.map(item => mapping.map(({ nameField, typeField, valueField }) =>
            ({ name: nameField, type: item[typeField], value: item[valueField], ...item })
        )).flat(Infinity)
        setData(list)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA03
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA03))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA03', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' ref={ChartBox} draggable={render ? false : true} onDragStart={onDragStart}>
                {size && Style && <LineTemplate size={preview ? { ...size, height: size.width } : size} data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA04 = ({ preview, HomeEvent, render, config }) => {
    const ChartBox = useRef()
    const size = useSize(ChartBox)
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const list = data.map(item => mapping.map(({ nameField, typeField, valueField }) =>
            ({ name: nameField, type: item[typeField], value: item[valueField], ...item })
        )).flat(Infinity)
        setData(list)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA04
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA04))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA04', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' ref={ChartBox} draggable={render ? false : true} onDragStart={onDragStart}>
                {size && Style && <AreaTemplate size={preview ? { ...size, height: size.width } : size} data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA05 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { typeField, valueField, mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const list = data.map(item => ({ type: item[typeField], value: item[valueField], ...item }))
        setData(list)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA05
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA05))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA05', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && <PieTemplate data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA06 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { targetField, mapping, ...style } = config
        const chartColor = mapping.map(({ color }) => color)
        const thresholds = mapping.map(({ value }) => value)
        setData(data[targetField])
        setStyle({ chartColor, thresholds, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA06
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA06))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA06', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && <GaugeTemplate data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA07 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const list = data.map(item => mapping.map(({ nameField, typeField, valueField }) =>
            ({ name: nameField, type: item[typeField], value: item[valueField], ...item })
        )).flat(Infinity)
        setData(list)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.ChartTemplateA07
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA07))
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA07', w: 2, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && <RadarTemplate data={Data} style={Style} />}
            </div>
        </div>
    )
}
export const ChartTemplateA08 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        setData(data)
        setStyle({ chartColor, ...style })
    }

    useMount(() => {
        FormatData(getVirtualData(ParamsMapping.ChartTemplateA08.range), ParamsMapping.ChartTemplateA08)
        // if (preview) {
        //     const { api, params } = ParamsMapping.ChartTemplateA07
        //     getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA07))
        // }
    })

    useEffect(() => {
        if (!preview) {
            FormatData(getVirtualData(config.range), config)
            // const { api, params } = ParamsMapping.ChartTemplateA07
            // getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA08', w: 12, h: 3, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && <HeatmapTemplate data={Data} style={Style} />}
            </div>
        </div>
    )
}

export const ChartTemplateA09 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const { mapping, ...style } = config
        const chartColor = mapping.map(item => item.color)
        const XData = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        const YData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        setData(data)
        setStyle({ chartColor, XData, YData, ...style })
    }
    useMount(() => {
        FormatData(get3DBarData(ParamsMapping.ChartTemplateA09.max), ParamsMapping.ChartTemplateA09)
        // if (preview) {
        //     const { api, params } = ParamsMapping.ChartTemplateA07
        //     getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, ParamsMapping.ChartTemplateA07))
        // }
    })
    useEffect(() => {
        if (!preview) {
            FormatData(get3DBarData(config.max), config)
            // const { api, params } = ParamsMapping.ChartTemplateA07
            // getData({ url: api, params: stringToObject(params) }).then(res => FormatData(res?.list || res, config))
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'ChartTemplateA09', w: 12, h: 8, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && <Bar3DTemplate data={Data} style={Style} />}
            </div>
        </div>
    )
}

const VChartLineExhibitionData = [
    { uuid: '01', name: '2021', type: '暴雪娱乐', value: 4229 },
    { uuid: '02', name: '2021', type: '电子艺界', value: 3932 },
    { uuid: '03', name: '2021', type: '动视', value: 5221 },
    { uuid: '04', name: '2021', type: '育碧', value: 9256 },
    { uuid: '05', name: '2021', type: '任天堂', value: 3308 },
    { uuid: '06', name: '2021', type: '索尼', value: 5432 },
    { uuid: '07', name: '2021', type: '微软游戏', value: 13701 },
    { uuid: '08', name: '2021', type: 'CDPR', value: 4008 },
    { uuid: '09', name: '2021', type: 'Epic', value: 18712 },
    { uuid: '11', name: '2022', type: '暴雪娱乐', value: 4376 },
    { uuid: '12', name: '2022', type: '电子艺界', value: 3987 },
    { uuid: '13', name: '2022', type: '动视', value: 3574 },
    { uuid: '14', name: '2022', type: '育碧', value: 4376 },
    { uuid: '15', name: '2022', type: '任天堂', value: 4572 },
    { uuid: '16', name: '2022', type: '索尼', value: 3417 },
    { uuid: '17', name: '2022', type: '微软游戏', value: 5231 },
    { uuid: '18', name: '2022', type: 'CDPR', value: 4572 },
    { uuid: '19', name: '2022', type: 'Epic', value: 6134 },
    { uuid: '21', name: '2023', type: '暴雪娱乐', value: 3054 },
    { uuid: '22', name: '2023', type: '电子艺界', value: 5067 },
    { uuid: '23', name: '2023', type: '动视', value: 7004 },
    { uuid: '24', name: '2023', type: '育碧', value: 9054 },
    { uuid: '25', name: '2023', type: '任天堂', value: 12043 },
    { uuid: '26', name: '2023', type: '索尼', value: 15067 },
    { uuid: '27', name: '2023', type: '微软游戏', value: 10119 },
    { uuid: '28', name: '2023', type: 'CDPR', value: 12043 },
    { uuid: '29', name: '2023', type: 'Epic', value: 10419 },
    { uuid: '31', name: '2024', type: '暴雪娱乐', value: 12814 },
    { uuid: '32', name: '2024', type: '电子艺界', value: 13012 },
    { uuid: '33', name: '2024', type: '动视', value: 11624 },
    { uuid: '34', name: '2024', type: '育碧', value: 8814 },
    { uuid: '35', name: '2024', type: '任天堂', value: 12998 },
    { uuid: '36', name: '2024', type: '索尼', value: 12321 },
    { uuid: '37', name: '2024', type: '微软游戏', value: 10342 },
    { uuid: '38', name: '2024', type: 'CDPR', value: 22998 },
    { uuid: '39', name: '2024', type: 'Epic', value: 11261 },
]
const VChartPieExhibitionData = [
    { type: '暴雪娱乐', value: 46.60 },
    { type: '电子艺界', value: 27.72 },
    { type: '动视', value: 8.13 },
    { type: '育碧', value: 5 },
    { type: '任天堂', value: 3.63 },
    { type: '索尼', value: 2.83 },
    { type: '微软游戏', value: 2.59 },
    { type: 'CDPR', value: 31.5 },
    { type: 'Epic', value: 13.5 }
]

const VChartProgressExhibitionData = [
    { name: '暴雪娱乐', type: '数值', value: 0.46 },
    { name: '电子艺界', type: '数值', value: 0.72 },
    { name: '动视', type: '数值', value: 0.13 },
    { name: '育碧', type: '数值', value: 0.5 },
    { name: '任天堂', type: '数值', value: 0.63 },
    { name: '索尼', type: '数值', value: 0.83 },
    { name: '微软游戏', type: '数值', value: 0.59 },
    { name: 'CDPR', type: '数值', value: 0.31 },
    { name: 'Epic', type: '数值', value: 0.13 }
]

// 折线图 面积图 柱状图 条形图
export const VChartTemplateA01 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState()
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA01Axes,
            VChartTemplateA01Legends,
            VChartTemplateA01Label,
            VChartTemplateA01Tooltip,
            VChartTemplateA01Crosshair,
            VChartTemplateA01Common,
            VChartTemplateA01Title,
            VChartTemplateA01Line,
            VChartTemplateA01Bar,
            VChartTemplateA01Point,
            VChartTemplateA01BarBack,
            VChartTemplateA01LineLabel,
            VChartTemplateA01TotalLabel,
            VChartTemplateA01MarkLine,
            VChartTemplateA01MarkPoint,
            VChartTemplateA01ScrollBar
        } = config
        const { api, params, colorPalette, xField, yField, ...common } = VChartTemplateA01Common
        const style = {
            ...VChartTemplateA01Axes,
            ...VChartTemplateA01Legends,
            ...VChartTemplateA01Label,
            ...VChartTemplateA01Tooltip,
            ...VChartTemplateA01Crosshair,
            ...VChartTemplateA01Title,
            ...VChartTemplateA01Line,
            ...VChartTemplateA01Bar,
            ...VChartTemplateA01Point,
            ...VChartTemplateA01BarBack,
            ...VChartTemplateA01LineLabel,
            ...VChartTemplateA01TotalLabel,
            ...VChartTemplateA01MarkLine,
            ...VChartTemplateA01MarkPoint,
            ...VChartTemplateA01ScrollBar,
            ...common,
            color: colorPalette.map(item => item.color),
        }
        setStyle(style)
        setData(data)
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params, xField, yField } = ParamsMapping.VChartTemplateA01Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData).replace(new RegExp(xField, 'g'), 'type').replace(new RegExp(yField, 'g'), 'value'))
            FormatData(data, ParamsMapping)
        }
    })
    useEffect(() => {
        if (!preview) {
            const { api, params, xField, yField } = config.VChartTemplateA01Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData).replace(new RegExp(xField, 'g'), 'type').replace(new RegExp(yField, 'g'), 'value'))
            FormatData(data, config)
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA01', w: 12, h: 6, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA01 data={Data} style={Style} />}
            </div>
        </div>
    )
}

// 饼图 环图 玫瑰图 雷达图
export const VChartTemplateA02 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState()
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA02Common,
            VChartTemplateA02Title,
            VChartTemplateA02Legends,
            VChartTemplateA02Tooltip,
            VChartTemplateA02Crosshair,
            VChartTemplateA02TotalLabel,
            VChartTemplateA02Pie,
            VChartTemplateA02Indicator,
            VChartTemplateA02Label,
            VChartTemplateA02Axes,
            VChartTemplateA02Line,
            VChartTemplateA02Point,
            VChartTemplateA02MarkLine,
            VChartTemplateA02MarkPoint,
        } = config
        const { api, params, colorPalette, ...common } = VChartTemplateA02Common
        const style = {
            ...VChartTemplateA02Title,
            ...VChartTemplateA02Legends,
            ...VChartTemplateA02Tooltip,
            ...VChartTemplateA02Crosshair,
            ...VChartTemplateA02TotalLabel,
            ...VChartTemplateA02Pie,
            ...VChartTemplateA02Indicator,
            ...VChartTemplateA02Label,
            ...VChartTemplateA02Axes,
            ...VChartTemplateA02Line,
            ...VChartTemplateA02Point,
            ...VChartTemplateA02MarkLine,
            ...VChartTemplateA02MarkPoint,
            color: colorPalette.map(item => item.color),
            ...common,
        }
        setStyle(style)
        setData(data)
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params, categoryField, valueField } = ParamsMapping.VChartTemplateA02Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData)
                .replace(new RegExp(categoryField, 'g'), 'type')
                .replace(new RegExp(valueField, 'g'), 'value'))
            FormatData(data, ParamsMapping)
        }
    })
    useEffect(() => {
        if (!preview) {
            const { api, params, categoryField, valueField } = config.VChartTemplateA02Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData)
                .replace(new RegExp(categoryField, 'g'), 'type')
                .replace(new RegExp(valueField, 'g'), 'value'))
            FormatData(data, config)
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA02', w: 6, h: 6, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA02 data={Data} style={Style} />}
            </div>
        </div>
    )
}

// 仪表图 
export const VChartTemplateA03 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([{ type: '目标A', value: 0.8 }])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA03Common,
            VChartTemplateA03Indicator,
            VChartTemplateA03Circular,
            VChartTemplateA03Gauge,
            VChartTemplateA03Pin,
            VChartTemplateA03Pointer,
            VChartTemplateA03PinBackground,
            VChartTemplateA03Title
        } = config
        const { api, params, ...common } = VChartTemplateA03Common
        const style = {
            ...VChartTemplateA03Indicator,
            ...VChartTemplateA03Circular,
            ...VChartTemplateA03Gauge,
            ...VChartTemplateA03Pin,
            ...VChartTemplateA03Pointer,
            ...VChartTemplateA03PinBackground,
            ...VChartTemplateA03Title,
            ...common,
        }
        setStyle(style)
        setData([{ type: '目标', value: 0.9 }])
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params, categoryField, valueField } = ParamsMapping.VChartTemplateA03Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData)
                .replace(new RegExp(categoryField, 'g'), 'type')
                .replace(new RegExp(valueField, 'g'), 'value'))
            FormatData(data, ParamsMapping)
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params, categoryField, valueField } = config.VChartTemplateA03Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData)
                .replace(new RegExp(categoryField, 'g'), 'type')
                .replace(new RegExp(valueField, 'g'), 'value'))
            FormatData(data, config)
        }
    }, [config])

    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA03', w: 6, h: 6, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA03 data={Data} style={Style} />}
            </div>
        </div>
    )
}

// 进度图 
export const VChartTemplateA04 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([{ type: '目标A', value: 0.8 }])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA04Common,
            VChartTemplateA04Title,
            VChartTemplateA04Tooltip,
            VChartTemplateA04Axes,
            VChartTemplateA04Indicator,
            VChartTemplateA04Legends,
            VChartTemplateA04Progress,
        } = config
        const { api, params, colorPalette, ...common } = VChartTemplateA04Common
        const style = {
            ...VChartTemplateA04Title,
            ...VChartTemplateA04Tooltip,
            ...VChartTemplateA04Axes,
            ...VChartTemplateA04Indicator,
            ...VChartTemplateA04Legends,
            ...VChartTemplateA04Progress,
            color: colorPalette.map(item => item.color),
            ...common,
        }
        setStyle(style)
        setData(data)
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params, xField, yField } = ParamsMapping.VChartTemplateA04Common
            const data = JSON.parse(JSON.stringify(VChartProgressExhibitionData)
                .replace(new RegExp(xField, 'g'), 'value')
                .replace(new RegExp(yField, 'g'), 'type'))
            FormatData(data, ParamsMapping)
        }
    })
    useEffect(() => {
        if (!preview) {
            const { api, params, xField, yField } = config.VChartTemplateA04Common
            const data = JSON.parse(JSON.stringify(VChartProgressExhibitionData)
                .replace(new RegExp(xField, 'g'), 'value')
                .replace(new RegExp(yField, 'g'), 'type'))
            FormatData(data, config)
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA04', w: 6, h: 2, minW: 1, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA04 data={Data} style={Style} />}
            </div>
        </div>
    )
}

// 水波图 
export const VChartTemplateA05 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([{ value: 0.8 }])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA05Common,
            VChartTemplateA05Indicator,
            VChartTemplateA05Title
        } = config
        const { api, params, ...common } = VChartTemplateA05Common
        const style = {
            ...VChartTemplateA05Indicator,
            ...VChartTemplateA05Title,
            ...common,
        }
        setStyle(style)
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params } = ParamsMapping.VChartTemplateA05Common
            // const data = JSON.parse(JSON.stringify(VChartProgressExhibitionData).replace(new RegExp(xField, 'g'), 'value'))
            FormatData('', ParamsMapping)
        }
    })
    useEffect(() => {
        if (!preview) {
            const { api, params } = config.VChartTemplateA05Common
            // const data = JSON.parse(JSON.stringify(VChartProgressExhibitionData).replace(new RegExp(xField, 'g'), 'value'))
            FormatData('', config)
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA05', w: 4, h: 4, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA05 data={Data} style={Style} />}
            </div>
        </div>
    )
}

// 3D图折现&面积
export const VChartTemplateA06 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([{ value: 0.8 }])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA06Common,
            VChartTemplateA06Axes,
            VChartTemplateA06Legends,
            VChartTemplateA06Tooltip,
            VChartTemplateA06Label,
            VChartTemplateA06Title,
            VChartTemplateA06Line,
            VChartTemplateA06Point,
            VChartTemplateA06LineLabel,
        } = config
        const { api, params, colorPalette, xField, yField, ...common } = VChartTemplateA06Common
        const style = {
            ...VChartTemplateA06Axes,
            ...VChartTemplateA06Legends,
            ...VChartTemplateA06Label,
            ...VChartTemplateA06Tooltip,
            ...VChartTemplateA06Title,
            ...VChartTemplateA06Line,
            ...VChartTemplateA06Point,
            ...VChartTemplateA06LineLabel,
            ...common,
            color: colorPalette.map(item => item.color),
        }
        setStyle(style)
        setData(data)
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params, xField, yField } = ParamsMapping.VChartTemplateA06Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData).replace(new RegExp(xField, 'g'), 'type').replace(new RegExp(yField, 'g'), 'value'))
            FormatData(data, ParamsMapping)
        }
    })
    useEffect(() => {
        if (!preview) {
            const { api, params, xField, yField } = config.VChartTemplateA06Common
            const data = JSON.parse(JSON.stringify(VChartLineExhibitionData).replace(new RegExp(xField, 'g'), 'type').replace(new RegExp(yField, 'g'), 'value'))
            FormatData(data, config)
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA06', w: 6, h: 6, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA06 data={Data} style={Style} />}
            </div>
        </div>
    )
}
// VChartA07
// 3D饼图
export const VChartTemplateA07 = ({ preview, HomeEvent, render, config }) => {
    const [Style, setStyle] = useState()
    const [Data, setData] = useState([{ value: 0.8 }])
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })
    const FormatData = (data, config) => {
        const {
            VChartTemplateA07Common,
            VChartTemplateA07Title,
            VChartTemplateA07Legends,
        } = config
        const { api, params, colorPalette, ...common } = VChartTemplateA07Common
        const style = {
            ...VChartTemplateA07Title,
            ...VChartTemplateA07Legends,
            color: colorPalette.map(item => item.color),
            ...common,
        }
        setStyle(style)
        setData(data)
    }

    useMount(() => {
        // Todo 获取配置样式
        if (preview) {
            const { api, params, categoryField, valueField } = ParamsMapping.VChartTemplateA07Common
            const data = JSON.parse(JSON.stringify(VChartPieExhibitionData)
                .replace(new RegExp(categoryField, 'g'), 'type')
                .replace(new RegExp(valueField, 'g'), 'value'))
            FormatData(data, ParamsMapping)
        }
    })
    useEffect(() => {
        if (!preview) {
            const { api, params, categoryField, valueField } = config.VChartTemplateA07Common
            const data = JSON.parse(JSON.stringify(VChartPieExhibitionData)
                .replace(new RegExp(categoryField, 'g'), 'type')
                .replace(new RegExp(valueField, 'g'), 'value'))
            FormatData(data, config)
        }
    }, [config])
    const onDragStart = () => HomeEvent.emit({ i: 'VChartTemplateA07', w: 6, h: 6, minW: 2, minH: 2, maxW: 12, maxH: 12 })
    return (
        <div className='ChartTemplateA01'>
            <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                {Style && Data && <VChartA07 data={Data} style={Style} />}
            </div>
        </div>
    )
}

